<template>
	<view class="member-list">
		<view class="search-box">
			<wd-input v-model="searachInput" />
		</view>
		<scroll-view class="member-container" scroll-y>
			<view class="member-outer" v-for="item in showData" :key="item.id">
				<view class="member-box">
					<view class="member-avatar" @click="goPersonDetail(item)">
						<wd-img v-if="item.avatar" width="100" height="100" :round="true" :src="item.avatar"></wd-img>
						<view v-else class="default-avatar">未设置头像</view>
					</view>
					<view class="member-info">
						<view class="member-name">{{ item.realname }}</view>
						<view>{{ `籍贯: ${item.province}/${item.city}/${item.district}` }}</view>
						<view>{{ `公司: ${item.companyName}` }}</view>
						<view>{{ `职位: ${item.companyPosition}` }}</view>
					</view>
				</view>
				<view class="button-container">
					<view class="btn">
						{{ `状态  ${item.reviewStatus === '0' ? '审核中' : (item.reviewStatus === '1' ? '通过' : '拒绝')}`}}
					</view>
					<view class="btn" @click="agreeMember(item)">通过</view>
					<view class="btn" @click="refuseMember(item)">拒绝</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		http
	} from '@/utils/http'
	import {
		ref
	} from 'vue'
	import {
		onLaunch,
		onShow,
		onHide,
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	const showData = ref([])
	const searachInput = ref('')

	const initData = () => {
		http
			.get('/chamber/ccUser/list', {
				pageNo: 1,
				pageSize: 10000,
			})
			.then((res) => {
				if (res.success) {
					console.log(res)
					showData.value = res.result.records
				}
			})
	}
	onShow(() => {
		initData()
	})
	const goPersonDetail = (item) => {
		uni.navigateTo({
			url: '/pages/card/card?id=' + item.id
		})
	}
	const agreeMember = (item) => {
		const param = {
			"id": item.id,
			"reviewStatus": 1,
			"isMember": 0
		}
		handleApproval(param)
	}
	const refuseMember = (item) => {
		const param = {
			"id": item.id,
			"reviewStatus": 2,
			"isMember": 1
		}
		handleApproval(param)
	}
	const handleApproval = (param) => {
		http.post(`/chamber/ccUser/edit`, param).then((res) => {
				console.log(res)
				if (res.success) {
					console.log(res)
					// form.value = res.result
					initData()
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					})
				}
			})
			.catch((err) => {
				console.error('获取用户信息错误:', err)
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				})
			}).finally(() => {

			})
	}

</script>

<style lang="scss" scoped>
	.member-list {
		display: flex;
		flex-direction: column;
		height: 100vh;
		padding: 0 10px;
	}

	.search-box {
		padding: 10px 0;
	}

	.member-outer {
		margin-bottom: 20px;
		background-color: white;

	}

	.member-container {
		flex: 1;
		overflow: hidden;
	}

	.member-box {
		display: flex;
		padding: 15px;
		background-color: white;
		border-radius: 8px;
	}

	.member-avatar {
		width: 100px;
		height: 100px;
		margin-right: 15px;
	}

	.member-name {
		margin-bottom: 10rpx;
		font-weight: bold;
		text-align: center;
	}

	.member-info {
		display: flex;
		flex-direction: column;

	}

	.member-info>view {
		flex: 1;
		margin-bottom: 5px;
		margin-bottom: 0;
	}

	.default-avatar {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100px;
		height: 100px;
		color: #999;
		background-color: #f5f5f5;
		border-radius: 50%;
	}

	/* 可在此添加组件样式 */
	.button-container {
		box-sizing: border-box;
		display: flex;
		gap: 20rpx;
		width: 100%;
		padding-left: 20rpx;
		background-color: #ece8f0;
	}

	.btn {
		flex: 1;
		height: 80rpx;
		font-size: 30rpx;
		line-height: 80rpx;
	}
</style>